<template>
    <el-container class="home_container">
        <!-- 头部区域 -->
        <el-header>
            <div>
                <span class="hello"><el-icon><AlarmClock /></el-icon>MBTI后台管理系统    </span>
            </div>
            <el-button type="info" @click="logout">退出</el-button>
        </el-header>
        <!-- 页面主体区域 -->
        <el-container>
            <!-- 侧边栏 -->
            <el-aside width="200px">
                <!-- 侧边栏菜单区域 -->
                <el-col :span="12">
                    <!-- <h1 class="mb-2">计算机科学与工程学院</h1> -->
                    <el-menu active-text-color="#ffd04b" background-color="#dbebf3" class="el-menu-vertical-demo"
                        default-active="2" text-color="#000" @open="handleOpen" @close="handleClose" router = true>
                        <el-sub-menu index="1">
                            <template #title>
                                <el-icon><House /></el-icon>
                                <span>软件工程</span>
                            </template>
                                <el-menu-item index="/201v"><el-icon><ColdDrink /></el-icon>软件201</el-menu-item>
                                <el-menu-item index="/202v"><el-icon><ColdDrink /></el-icon>软件202</el-menu-item>
                                <el-menu-item index="/203v"><el-icon><ColdDrink /></el-icon>软件203</el-menu-item>
                                <el-menu-item index="/204v"><el-icon><ColdDrink /></el-icon>软件204</el-menu-item>
                        </el-sub-menu>
                        <el-sub-menu index="2">
                            <template #title>
                                <el-icon><House /></el-icon>
                                <span>网络工程</span>
                            </template>
                                <el-menu-item index="/205v"><el-icon><Lollipop /></el-icon>网络201</el-menu-item>
                                <el-menu-item index="/206v"><el-icon><Lollipop /></el-icon>网络202</el-menu-item>
                                <el-menu-item index="/207v"><el-icon><Lollipop /></el-icon>网络203</el-menu-item>
                                <el-menu-item index="/208v"><el-icon><Lollipop /></el-icon>网络204</el-menu-item>
                        </el-sub-menu>
                        <el-sub-menu index="3">
                            <template #title>
                                <el-icon><House /></el-icon>
                                <span>计算机科学与技术</span>
                            </template>
                                <el-menu-item index="/301v"><el-icon><MilkTea /></el-icon>计科201</el-menu-item>
                                <el-menu-item index="/302v"><el-icon><MilkTea /></el-icon>计科202</el-menu-item>
                                <el-menu-item index="/303v"><el-icon><MilkTea /></el-icon>计科203</el-menu-item>
                                <el-menu-item index="/304v"><el-icon><MilkTea /></el-icon>计科204</el-menu-item>
                                <el-menu-item index="/305v"><el-icon><MilkTea /></el-icon>计科205</el-menu-item>
                                <el-menu-item index="/306v"><el-icon><MilkTea /></el-icon>计科206</el-menu-item>
                        </el-sub-menu>
                    </el-menu>
                </el-col>
                </el-aside>

                <!-- 右侧内容主体区域 -->
                <el-main> <router-view ></router-view></el-main>
        </el-container>
    </el-container>

</template>

<script>
export default{
        setup(){
        }
          
        }
</script>




<style>
.home_container {
  height: 100%;
}
.el-header {
  background-color: #91d3f4;
  display: flex;
  justify-content: space-between;
  padding-left: 0;
  align-items: center;
 
  font-size: 30px;
    display: flex;
    align-items: center;
  }
.el-container{
  background-color: #91d3f4;
}
.el-aside {
  background-color: #dbebf3;
  width: 200px;
}
.el-main {
  background-color: #dbebf3;
  color: #dbebf3;
  width:100px
}
.el-menu{
    font-size: 30px;
    width: 200px;
}
.hello{
    font-weight: bolder;
}
</style>